import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import _ from 'lodash';
import { Statistics } from '@/models/connect';
import styles from './goodsStatistics.css';
import CommList from './commList';
import { goodsInfoExport } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';

const { TabPane } = Tabs;
interface P {
  statistics: Statistics;
  dispatch: Dispatch<AnyAction>;
}
@connect()
class goodsStatistics extends Component<P> {
  constructor(props: P) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/goodsList',
      detailsUrl: '/statistics/details/goodsDetails', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
    };
  }
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/goodsStatistics',
      payload: { deviceTypeNo: this.props.deviceTypeNo },
    });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { statistics = {} } = this.props;
    return this.state.visible && isMenuVisible('iot:goodsInfoLog:statistical') ? (
      <div className={styles['article-container']}>
        <div className={styles['article-top']}>
          <i>物品信息采集概览</i>
        </div>
        <div className={styles['article-bottom']}>
          <div className={styles.articleTextBox}>
            <p className={styles.articleTextBoxPone}>今日采集</p>
            <p className={styles.articleTextBoxPTwo}>
              {statistics.dayCount} <span className={styles.articleTextBoxspan}>条</span>
            </p>
          </div>
          <div className={styles.articleTextBox}>
            <p className={styles.articleTextBoxPone}>近一周采集</p>
            <p className={styles.articleTextBoxPTwo}>
              {statistics.weekCount} <span className={styles.articleTextBoxspan}>条</span>
            </p>
          </div>
          <div className={styles.articleTextBox}>
            <p className={styles.articleTextBoxPone}>近30天采集</p>
            <p className={styles.articleTextBoxPTwo}>
              {statistics.monthCount} <span className={styles.articleTextBoxspan}>条</span>
            </p>
          </div>
          <div className={styles.articleTextBox}>
            <p className={styles.articleTextBoxPone}>信息总数</p>
            <p className={styles.articleTextBoxPTwo}>
              {statistics.everyCount} <span className={styles.articleTextBoxspan}>条</span>
            </p>
          </div>
          <h3 className={styles.title}>物品信息采集库</h3>
        </div>
        {isMenuVisible('iot:goodsInfoLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        deviceTypeNo={this.props.deviceTypeNo}
        detailsUrl={this.state.detailsUrl}
        name="物品信息列表.xlsx"
        search={'iot:goodsInfoLog:businessInfo'}
        menuId={'iot:goodsInfoLog:exportList'}
        type={'2'}
        expApi={this.state.expApi}
        commListEx={goodsInfoExport}
      />
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/goodsStatistics'],
  statistics: statistics.statistics,
}))(goodsStatistics);
